﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8;" />
    <title>机动车违法查询</title>
    <meta charset='UTF-8'>
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no,email=no" name="format-detection" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
    <link href="../css/alipay/alipay.css" type="text/css" rel="stylesheet" />
    <link href="../css/alipay/amui-demo_files/toast.css" type="text/css" rel="stylesheet" />
    <link href="../css/alipay/button.css" type="text/css" rel="stylesheet" />
    <link href="../css/alipay/amui-demo_files/dialog.css" type="text/css" rel="stylesheet" />
    <link href="../css/alipay/amui-demo_files/button-group.css" type="text/css" rel="stylesheet" />
    <link href="../css/main.css" type="text/css" rel="stylesheet" />
    <link href="../css/dialog.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../js/extensions/base.js"></script>
    <script type="text/javascript" src="../css/alipay/amui-demo_files/amui.js"></script>
    <style>
        .ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d {
            padding: 10px 0 10px 0;
            text-align: center;
        }

            .ui-block-a img, .ui-block-b img, .ui-block-c img, .ui-block-d img {
                width: 43%;
                padding-top: 10%;
            }

        .am-button {
            padding-LEFT: 15PX;
        }
        .am-list:not([am-version]){padding: 0px;}
        .am-list:not([am-version])[am-mode~="form"] .am-list-item .am-list-label{margin-right: 15px;}
        .hm{font-family: STHeitiSC; font-size: 15px; color: #00aaff; padding-right: 10px; padding-top: 5px;}
    </style>
    <script type="text/javascript">
        $(function(){
            /*$("#dialogbut").click(function(){
             $(".mask").show();
             $(".demo-content").show();
             });*/

            $(".am-dialog-button").click(function(){
                $(".mask").hide();
                $(".demo-content").hide();
            });

        })
    </script>
</head>
<body>
<div class="mask" style="display: none;"></div>
<div class="demo-content"  style="display: none;">
    <div class="demo-mobile">
        <div class="am-dialog show" style="z-index: 10001;">
            <div class="am-dialog-wrap">
                <div class="am-dialog-body">
                    <p id="warn" class="am-dialog-brief"></p>
                </div>
                <div class="am-dialog-footer">
                    <a class="am-dialog-button">取消</a>
                    <a class="am-dialog-button">确定</a>
                </div>
            </div>
        </div>
    </div>
</div>
    <div data-role="page">
        <div data-role="content" style="background-color:#EFEFF4;padding-top:15px">
        	   <div class="am-toast" id="toast">
                        <div class="am-toast-text">
                            <span class="am-toast-icon am-icon" am-mode="toast-loading"></span> 正在查询...
                        </div>
                    </div>
            <div class="am-list" am-mode="flat chip form 43px">
                <div class="am-list-body">
                 
                    <div class="am-list-item am-input-autoclear">
                        <div class="am-list-label">品牌种类</div>
                        <div class="am-list-control">
                            <select id="jdccllxbm" name="jdccllxbm">
                            </select>
                            <input type="hidden" placeholder="" value="">
                        </div>
                        <div class="am-list-clear"><i class="am-icon-clear am-icon" am-mode="clear"></i></div>
                    </div>
                    <div class="am-list-item am-input-autoclear">
                        <div class="am-list-label">车牌号码</div>
                        <div class="am-list-content">
                            <span class="hm">云</span><input type="text" style="text-transform:uppercase; width: 86%;" id="inputLicense" placeholder="请输入六位车牌号" value="" maxlength="6" onkeyup="this.value=this.value.toUpperCase()">
                            <input type="hidden" placeholder="" value="">
                        </div>
                        <div class="am-list-clear"><i class="am-icon-clear am-icon" am-mode="clear"></i></div>
                    </div>
                    <div class="am-list-item am-input-autoclear">
                        <div class="am-list-label">发动机号</div>
                        <div class="am-list-control">
                            <input type="text" id="inputVin" placeholder="请输入发动机号后六位" value="" maxlength="6">
                            <input type="hidden" placeholder="" value="">
                        </div>
                        <div class="am-list-clear"><i class="am-icon-clear am-icon" am-mode="clear"></i></div>
                    </div>
                   
                </div>
                 <div style="padding-left:15px;padding-right:15px;margin-top:15PX;">
                        <input type="hidden" id="action" name="action" value=""/>
                        <input type="hidden" id="command" name="command" value=""/>
                        <button id="searchButton" type="button" class="am-button" am-mode="blue disabled">查询</button>
                        <button id="resultButton" type="button" class="am-button" am-mode="blue disabled" style="display: none;">查询结果</button>
                    </div>
            </div>
        </div>
    </div>
    <div id="fuwu" style="display: block;font-family:STHeitiSC  ;font-size: 12px; margin-bottom: 15px; margin-left: 0px; width: 100%; text-align: center; position: absolute; bottom: 0px;z-index:-1;">
        <div class="am-agreement am-ft-gray am-ft-sm">
            <p>
                本服务由吉林省公安厅<br />江苏欧索软件有限公司提供支持
            </p>
        </div>
    </div>
    <script>
        var secs = 60;
        $(function () {
            loadCarTypeList();

            $("#toast").hide();
            window.setInterval("checkButtonState()", 200);
            $("#searchButton").click(function () {
                var jdccllxbm = $("#jdccllxbm").val();
                var jdchphm = $("#inputLicense").val();
                var fdj = $("#inputVin").val();

                var rep=/[A-Z]{1}[A-Z_0-9]{5}$/;
                var rep_num = /[a-z_A-Z_0-9]{6}/;
                var firformet = "车牌号格式不正确,例A12345";
                var secformet = "请输入发动机号后六位";
                if (jdchphm && fdj && jdccllxbm) {
                    if(!rep.test(jdchphm)){
                        $("#warn").html(firformet);
                        $(".mask").show();
                        $(".demo-content").show();
                        return false;
                    }else if(!rep_num.test(fdj)){
                        $("#warn").html(secformet);
                        $(".mask").show();
                        $(".demo-content").show();
                        return false;
                    }else {
                        $("#toast").show();
                        result();
                    }
                }
            });
        });

        function checkButtonState() {
            if ($("#inputLicense").val() && $("#inputVin").val() && $("#jdccllxbm").val())
                $("#searchButton").attr("am-mode", "blue");
            else
                $("#searchButton").attr("am-mode", "blue disabled");
        }
        function result() {
            var jdccllxbm = $("#jdccllxbm").val();
            var jdchphm = $("#inputLicense").val();
            var fdj = $("#inputVin").val();

            $.ajax({
                url: '../../../api/cityservice/car/illegal',
                type: 'post',
                data: {"jdccllxbm": jdccllxbm,"jdchphm":jdchphm,"fdj":fdj},
                success: function (resp) {
                    if (resp && resp.succ && resp.statusCode == 100102) {
                        //查询条件提交，等待查询结果
                        $("#action").val("").val(resp.data.action);
                        $("#command").val("").val(resp.data.command);

                        $("#searchButton").hide();
                        for(var i=1;i<=secs;i++) {
                            window.setTimeout("update(" + i + ")", i * 1000);
                        }
                        $("#resultButton").show();

                    }else if(resp && resp.succ && resp.statusCode == 100101){
                        //查询条件已有查询结果，直接返回结果
                        window.location.href = 'PeccancyResult.html?jdccllxbm=' + jdccllxbm + '&jdchphm=' + jdchphm+ '&fdj=' + fdj;
                    } else {
                        $("#warn").html(resp.msg);
                        $(".mask").show();
                        $(".demo-content").show();
                    }
                },
                error: function (){
                    $("#warn").html("查询失败！");
                    $(".mask").show();
                    $(".demo-content").show();
                },
                complete: function () {
                    $("#toast").hide();
                }
            });

        }

        function loadCarTypeList(){
            $.ajax({
                url: '../../../api/cityservice/vehicle/cartype',
                type: 'get',
                success: function (resp) {
                    if(resp && resp.succ){
                        var carTypeList = resp.data;
                        var options = "";
                        for(var i=0;i<carTypeList.length;i++){
                            if(carTypeList[i].code == '02'){
                                options = options+"<option selected value='"+carTypeList[i].code+"'>"+carTypeList[i].name+"</option>";
                            }else{
                                options = options+"<option value='"+carTypeList[i].code+"'>"+carTypeList[i].name+"</option>";
                            }
                        }
                        $("#jdccllxbm").append(options);
                    } else {
                        $("#warn").html(resp.msg);
                        $(".mask").show();
                        $(".demo-content").show();
                    }
                },
                error: function (){
                    $("#warn").html("查询失败！");
                    $(".mask").show();
                    $(".demo-content").show();
                }
            });
        }

        $("#resultButton").click(function(){
            var action = $("#action").val();
            var command = $("#command").val();
            var jdccllxbm = $("#jdccllxbm").val();
            var jdchphm = $("#inputLicense").val();
            var fdj = $("#inputVin").val();
            $.ajax({
                url: '../../../api/cityservice/result/gain',
                type: 'post',
                data: {"action": action,"command":command},
                success: function (resp) {
                    if(resp && resp.succ && resp.statusCode == 100101){
                        //查询条件已有查询结果，直接返回结果
                        window.location.href = 'PeccancyResult.html?jdccllxbm=' + jdccllxbm + '&jdchphm=' + jdchphm+ '&fdj=' + fdj;
                    } else {
                        $("#warn").html(resp.msg);
                        $(".mask").show();
                        $(".demo-content").show();

                        $("#inputLicense").val("");
                       $("#inputVin").val("");
                        $("#searchButton").show();
                        $("#resultButton").hide();
                        $("#resultButton").attr("am-mode", "blue disabled");
                    }
                },
                error: function (){
                    $("#warn").html("查询失败！");
                    $(".mask").show();
                    $(".demo-content").show();
                }
            });
        });

        function update(num) {
            if(num == secs) {
                $("#resultButton").text("查询结果");
                $("#resultButton").attr("am-mode", "blue");
            }
            else {
                var printnr = secs-num;
                $("#resultButton").text(printnr +"秒后可查询结果");
            }
        }
    </script>
</body>

</html>
